Day 22：開始來學資料繫結：屬性繫結（一）

今天要來探討第二種資料繫結的方法：屬性繫結（Property binding）。

我們以上一篇 a 標籤的 href 為例，如果要改成屬性繫結（Property binding），寫法會從 href="{{ url }}" 變成 [href]=url。

此時點擊網頁的 h1 連結，會得到跟前一篇同樣的結果（打開 google 首頁）。

我們再修改其他地方當成範例，我們先在 img 的標籤上，增加一個 title 屬性 title="Demo"。

切換到網頁，可以看到這個修改呈現的結果。

接著我們改寫成 Angular 的 屬性繫結（Property binding） 語法： [title]="title" ，此時 "title" 是變動的，也就是會受 app.component.ts 裡頭 title 這個 property 的影響。

我們可以切換到網頁來得到驗證。

網頁呈現的內容，已經從 Demo 變成了 ABow 的追劇生活。

這裡我們可以得知，img 標籤底下的 title property 跟
AppComponent 底下的 title property 綁定在一起了。

接著再做一個範例，先把 img 裡 src 的內容剪下，打開 app.component.ts 並新增一個屬性 imgUrl，接著把剛才剪下的內容貼上。

回到 Template 中，把 img 的 src 部分改寫成 [src]="imgUrl"，再切換到網頁觀察，就可以發現 img 的 src 屬性跟 AppComponent 中的 imgUrl 屬性也綁定在一起了，因此網頁中的圖片同樣可以正常顯示。

這就是關於 屬性繫結（Property binding） 的基本用法，不過這裡有個議題是關於 Property 及 Attribute 的區別，我們會在下一篇繼續探討~